<template>
  <div class="home">
    <div class="home-container" v-if="songsRank.length > 0">
      <home-header></home-header>
      <home-swiper :banners="banners"></home-swiper>
      <songs-chart :rank-songs="songsRank"></songs-chart>
      <hot-playlist :list="playlist"></hot-playlist>
    </div>
    <div class="loading" v-else>loading.............</div>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref, onMounted } from "vue";
import { getRecommendlist, getHomeBanners, getSongsRank } from "@/api/index.js";
import HomeSwiper from "./components/HomeSwiper/index.vue";
import HotPlaylist from "./components/HotPlaylist/index.vue";
import SongsChart from "./components/SongsChart/index.vue";
import HomeHeader from "./components/HomeHeader/index.vue";
// hot-playlist的逻辑
const hotPlaylistEffect = () => {
  const playlist = ref([]);
  const getPlaylist = async () => {
    const params = {
      limit: 10,
    };
    const res = await getRecommendlist(params);
    if (res.code === 200) {
      playlist.value = res.result;
    }
  };
  onMounted(getPlaylist);
  return {
    playlist,
  };
};
//获取homebanners的数据
const homeBannersEffect = () => {
  const banners = ref([]);
  const getBannerData = async () => {
    const params = {
      type: 1,
    };
    const res = await getHomeBanners(params);
    if (res.code === 200) {
      banners.value = res.banners;
    }
  };
  onMounted(getBannerData);
  return {
    banners,
  };
};
//获取歌曲排行榜的数据
const songChartEffect = () => {
  const songsRank = ref([]);
  const getSongsRankData = async () => {
    const params = {
      limit: 10,
    };
    const res = await getSongsRank(params);
    if (res.code === 200) {
      songsRank.value = res.result;
    }
  };
  onMounted(getSongsRankData);
  return {
    songsRank,
  };
};

export default {
  name: "Home",
  components: {
    HotPlaylist,
    SongsChart,
    HomeSwiper,
    HomeHeader,
  },
  setup() {
    const { playlist } = hotPlaylistEffect();
    const { banners } = homeBannersEffect();
    const { songsRank } = songChartEffect();
    return {
      playlist,
      banners,
      songsRank,
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: #191919;
  overflow: auto;
  position: relative;
  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
  }
}
</style>
